<template>
    <div class="dashboard-container">
      <!-- 筛选查询 -->
      <el-form :inline="true">
        <el-form-item label="用户姓名">
          <el-input placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary">查询</el-button>
        <el-button type="primary">新增账号</el-button>
      </el-form>

      <!-- 数据 -->
      <el-table :data="list">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="account" label="账号"></el-table-column>
        <el-table-column prop="role" label="角色"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column  label="操作">
          <template>
            <el-button type="text" >编辑</el-button>
            <el-button type="text">删除</el-button>
            <el-button type="text">停用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="padding-top:30px; text-align: right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          background
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>

    </div>
  </template>
  
  <script>
  import { mapGetters } from 'vuex'
  
  export default {
    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data(){
      return {
        list: [{name: '张三', limit: 9999, number: 1000, account: 'admin',role: '管理员', phone: 16586879948, type: '一级代理商',sy:'言通讯',sr:'开启',zs:'隐藏',status:'启用' }],
        currentPage4: 1
      }
    },
    methods:{
      handleSizeChange(){

      },
      handleCurrentChange(){

      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  </style>
  